<template>
  <el-col :span="props.span" v-bind="$attrs">
    <div class="flow-desc-item g-flex-start-start">
      <span class="flow-desc-item-label g-flex-shrink-0">{{ props.label }}</span>
      <span class="flow-desc-item-value g-flex-1">
        <slot name="default">{{ empty(props.value) }}</slot>
      </span>
    </div>
  </el-col>
</template>
<script lang="ts" setup name="GFlowDescItem">
import { defineProps, withDefaults } from 'vue';
import { empty } from '@/utils';

interface GFlowDescItemProps {
  label: string;
  value?: any;
  span?: number;
}
const props = withDefaults(defineProps<GFlowDescItemProps>(), {
  span: 8
});
</script>
<style lang="scss" scoped>
.flow-desc-item {
  padding: 6px 24px 6px 0;
  font-size: 14px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  line-height: 22px;
  .flow-desc-item-label {
    color: #51596c;
  }
  .flow-desc-item-value {
    color: #212529;
    overflow: hidden;
  }
}
</style>
